{extend name="$_theme_public_layout"/}
{block name="style"}
<link href="__STATIC__/libs/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
<style type="text/css">
    /*上传个人图像*/
    .upload-avatar-box{display: block;margin-top: 20px;width: 135px;height: 130px;line-height: 120px;}
    .upload-avatar-box img{max-height: 120px;max-width: 125px;}
</style>
{/block}

{block name="main"}

<div class="content-wrapper">
    <div class="container">

        <!-- Main content -->
        <section class="content">
            <div class="row">
                {include file="leftnav" /}
                <div class="col-md-9">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#settings" data-toggle="tab" aria-expanded="false">个人设置</a></li>
                        </ul>
                            <div class="tab-content">
                                <!-- /.tab-pane -->
                                <div class="tab-pane active" id="settings">
                                    <form action="{:url('user/index/profile',['uid'=>$user_info['uid']])}" method="post" class="form-builder form-horizontal">
                                        <fieldset>
                                            <input type="hidden" id="uid" name="uid" value="1">
                                            <div class="form-group item_nickname ">
                                                <label for="nickname" class="col-md-3 control-label">昵称<sup>*</sup></label>
                                                <div class="col-md-4">
                                                    <input type="text" class="form-control" name="nickname" value="{$user_info.nickname}">
                                                </div>
                                            </div>
                                            <div class="form-group item_email ">
                                                <label for="email" class="col-md-3 control-label">邮箱<sup>*</sup></label>
                                                <div class="col-md-4">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                                        <input type="email" class="form-control" name="email" value="{$user_info.email}" placeholder="填写Email">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group item_mobile ">
                                                <label for="mobile" class="col-md-3 control-label">手机号</label>
                                                <div class="col-md-4">
                                                    <div class="input-group">
                                                        <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                                                        <input type="number" class="form-control" name="mobile" value="{$user_info.mobile}" placeholder="填写手机号">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group item_sex ">
                                                <label for="sex" class="col-md-3 control-label">性别</label>
                                                <div class="col-md-6">
                                                    <div class="oh mb-10 pl-5">
                                                        <div class="radio radio-primary fl mr-10">
                                                            <label for="sex0">
                                                                <input type="radio" name="sex" id="sex0" value="0">&nbsp;保密</label>
                                                        </div>
                                                        <div class="radio radio-primary fl mr-10">
                                                            <label for="sex1">
                                                                <input type="radio" name="sex" id="sex1" value="1" checked="">&nbsp;男</label>
                                                        </div>
                                                        <div class="radio radio-primary fl mr-10">
                                                            <label for="sex2"><input type="radio" name="sex" id="sex2" value="2">&nbsp;女</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group item_description ">
                                                <label for="description" class="col-md-3 control-label">个人说明</label>
                                                <div class="col-md-6">
                                                    <textarea name="description" class="form-control" length="120" rows="5">{$user_info.description}</textarea>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <input type="hidden" id="ismore_avatar" value="single">
                                                <div class="form-group controls item_avatar ">
                                                    <label for="avatar" class="col-md-3 control-label">头像<sup>*</sup></label>
                                                    <div class="col-md-6" style="padding-bottom: 5px;"><span class="btn btn-info ml-10 btn-sm" id="upload_avatar_avatar"><i class="fa fa-upload"></i> 上传头像</span><span class="color-red f12 ml-10">用户头像默认随机分配</span>
                                                        <input class="attach" type="hidden" id="avatar" name="avatar" value="{$user_info.avatar}">

                                                        <div class="upload-avatar-box tc popup-avatar img-thumbnail pr">
                                                            <div class="each">
                                                                <i data-avatarid="avatar" class="removeAvatar fa fa-times-circle remove-attachment"></i>

                                                                <a href="{$user_info.avatar|root_full_path}" title="点击查看大图">
                                                                    <img src="{$user_info.avatar|root_full_path}">
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="form-group">
                                                <div class="col-md-10 col-md-offset-3 mt-10 tc">
                                                    <div class="col-md-3">
                                                        <button class="btn btn-block btn-primary submit ajax-post " type="submit" target-form="form-builder">确定</button>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <button onclick="javascript:history.back(-1);return false;" class="btn btn-block btn-default return">返回</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                                <!-- /.tab-pane -->
                            </div>
                        <!-- /.tab-content -->
                    </div>
                    <!-- /.nav-tabs-custom -->
                </div>
            </div>
        </section>
    </div>
</div>
<!-- /.content-wrapper -->

{/block}

{block name="script"}
<script type="text/javascript" src="__STATIC_LIBS__/webuploader/js/webuploader.min.js"></script>
<script>
  //本地上传(分开写为了好控制)
  $(function () {
    var uploader_avatar= WebUploader.create({
      // 选完文件后，是否自动上传。
      auto: true,
      duplicate: true,// 同一文件是否可以重复上传
      // swf文件路径
      swf: '__STATIC__/libs/webuploader/Uploader.swf',
      // 文件接收服务端。
      server: "{:url('user/upload/uploadAvatar',['uid'=>$user_info['uid']])}",
      //验证文件总数量, 超出则不允许加入队列
      fileNumLimit: 5,
      // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
      resize: false,
      // 验证单个文件大小是否超出限制, 超出则不允许加入队列
      fileSingleSizeLimit:2*1024*1024,
      // 内部根据当前运行是创建，可能是input元素，也可能是flash.

      //选择文件的按钮
      pick: '#upload_avatar_avatar',
      // 只允许选择图片文件
      accept:{title:'Images',extensions:'gif,jpg,jpeg,bmp,png',mimeTypes:'image/*'}
    });
    uploader_avatar.on('fileQueued', function (file) {
      uploader_avatar.upload();
    });
    /*上传成功**/
    uploader_avatar.on('uploadSuccess', function (file, result) {console.debug(result);
      if (result.code) {
        var data = result.data;
        $("[name='avatar']").val(data.path);
        $("[name='avatar']").parent().find('.popup-avatar').html(
          '<div class="each"><i data-avatarid="avatar" class="removeAvatar fa fa-times-circle remove-attachment"></i><a href="'+data.url+'" title="点击查看大图片"><img src="'+data.url+'"></a><div class="text-center opacity del_btn" ></div></div>'
        );

        uploader_avatar.reset();
      } else {
        updateAlert(result.msg);
        setTimeout(function () {
          $(this).removeClass('disabled').prop('disabled', false);
        }, 1500);
      }
    });
    //移除头像
    $('body').on('click','.removeAvatar', function() {
      var avatarid=$(this).attr('data-avatarid');
      $("#"+avatarid).val('');
      $('.popup-avatar').html('');
    })
  })

</script>

{/block}
